/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div ref="kafkaBox"
         class="data-source-wrapper">
        <div class="header">
            <div class="header__img">
                <img src="/static/img/data_explore.png"/>
            </div>
            <div class="header__title">
                <lang>{{ title }}</lang>
            </div>
        </div>
        <sf-tab-panel ref="optionsTabpanel"
                      class="data-source__tab"
                      size="large"
                      :tab-width="136">
                <sf-tab-item :title="_('检索数据')">
                    <no-data v-if="!isOpenIframe"></no-data>
                    <iframe v-if="isOpenIframe" class="iframe" :src="iframeSrc" ></iframe>
                </sf-tab-item>
                <sf-tab-item :title="_('交互式查询')">
                    <iframe class="iframe" :src="sqlpadSrc"></iframe>
                </sf-tab-item>
        </sf-tab-panel>
    </div>
</template>

<script lang="ts">

import { Component, Vue} from 'vue-property-decorator';
import { encodeDate } from 'src/util/format';
import NoData from 'src/components/nodata.vue';
import pageTitle from '../common/page_title/page_title.vue';

import localListTable from './component/local_list_table.vue';
import dataListTable from './component/data_list_table.vue';


@Component({
    components: {
        pageTitle,
        localListTable,
        dataListTable,
        NoData
    }
})
export default class DatasourceManager extends Vue {
    title= _('数据探索')
    isOpenIframe = false

    encodeTime (time: string) {
        return encodeDate(time);
    }

    async mounted () {
        let jsonData = await this.$ajax.post(`/metadata-service/api/v1/metadata/user?username=${this.$store.state.userId}`);
        if (jsonData.success) {
            this.isOpenIframe = true;
        }
    }

    get iframeSrc () {

        // 本地开发时，默认使用localhost:3000, 自己起datahub环境 平台ip与datahubip不一样时，页面打不开
        if (process.env.NODE_ENV === 'development') {
            return `./datahub-frontend/login?ai_auto_login=ordinary&ai_name=${this.$store.state.userId}`
        }
        return this.$store.state.isAdmin ?
            `./datahub-frontend/login?ai_auto_login=true&ai_name=${this.$store.state.userId}` :
            `./datahub-frontend/login?ai_auto_login=ordinary&ai_name=${this.$store.state.userId}`
    }

    get sqlpadSrc() {
        return './sqlpad/queries/new'
    }

    getQueryString = function (name) {
        let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        let r = window.location.search.substr(1).match(reg);
        if(r !== null) {
            return  unescape(r[2]);
        }
        return null;
    }
};

</script>

<style lang="less" scoped>
.data-source-wrapper {
    height: 100%;
    background: #fff;

    .header {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 80px;
        margin: 0 12px;
        background: #fff;
        margin-bottom: -26px;

        &__img {
            margin-left:56px;
            margin-right: 18px;
        }
        &__title {
            font-size: 22px;
            font-weight: 500;
            color: #507AF3;
            line-height: 36px;
        }
    }

    .data-source__tab {
        margin: 0 8px;
        height: calc(100% - 72px);

        .iframe {
            width: 100%;
            height: 98%;
            border: none;
        }
    }

    /deep/ .sfv-tabpanel_wrap {
        height: calc(100% - 18px);

        .tabpanel-body-item {
            height: 100%;
        }
    }

    /deep/ .sfv-tabpanel_scroll {
        margin-left: 40%;
    }

    /deep/ .sfv-tabpanel .sfv-tabpanel_header {
        border-bottom: 1px solid #ddd;
        height: 41px;

        .sfv-tabpanel_item {
            color: #8D8D8D;
            font-size: 16px;
            margin-right: 44px;
            height: 40px;
            line-height: 34px;

            &:hover {
                color: #3D3D3D;
                background-color: unset;
            }
        }
    }

    /deep/ .sfv-tabpanel_item.sfv-tabpanel_item--active {
        color: #3D3D3D;
        border-bottom: unset !important;

        &::after {
            content: '';
            position: absolute;
            left: 16px;
            bottom: 0px;
            width: 108px;
            height: 5px;
            background-color: #212121;
            border-radius: 4px;
        }
    }

}




</style>
